<template>
	<div style="border-radius: 5px; padding: 10px;">
		<el-form size="small">
			<el-form-item>
				<el-button  @click="doAlipay()">点击测试Alipay</el-button>
			</el-form-item>
		</el-form>
		<el-table :data="tableData" border style="margin-top: 10px;" v-loading="dataListLoading">
			<el-table-column fixed prop="outTradeNo" label="订单编号" align="center">
			</el-table-column>
			<el-table-column prop="totalAmount" label="交易金额" align="center" header-align="center">
			</el-table-column>
			<el-table-column prop="subject" label="商品名称" align="center" header-align="center">
			</el-table-column>
			<el-table-column prop="body" label="商品描述" align="center" header-align="center">
			</el-table-column>
			<el-table-column prop="createTime" label="支付时间" align="center" header-align="center">
				<template slot-scope="scope">
					{{scope.row.createTime | formatDate}}
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center" width="120">
				<template slot-scope="scope">
					<el-button @click="doRefund(scope.row.outTradeNo)" type="text" size="small">退款</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageIndex"
		 :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pageTotal">
		</el-pagination>
		
		<doRefund v-if='doRefundVisible' ref="doRefund" @refreshDataList="getDataList"></doRefund>
		<showAlipay v-if="showAlipayVisible" ref="showAlipay"></showAlipay>
	</div>
</template>

<script>
	import doRefund from "@/views/alipay/doRefund"
	import {getAlipayRecordList} from "@/api/alipay/alipay.js"
	import {formatDate} from "@/utils/common.js"
	import showAlipay from "@/views/alipay/showAlipay"
	export default {
		data(){
			return{
				tableData:[],
				dataListLoading:false,
				pageTotal:0,
				pageSize:10,
				pageIndex:1,
				doRefundVisible:false,
				showAlipayVisible:false,
			}
		},
		created: function() {
		},
		filters: {
			formatDate(time) {
				var date = new Date(time);
				return formatDate(date, 'yyyy-MM-dd hh:mm');
			}
		},
		components: {
			doRefund,
			showAlipay
		},
		mounted:function(){
			this.getDataList(this.pageIndex,this.pageSize)
		},
		methods:{
			handleSizeChange(val){
				this.pageIndex=1
				this.pageSize = val
				this.getDataList(this.pageIndex,this.pageSize)
			},
			handleCurrentChange(val){
				this.pageIndex = val
				this.getDataList(this.pageIndex,this.pageSize)
			},
			doRefund(outTradeNo){
				this.doRefundVisible = true
				this.$nextTick(function(){
					this.$refs.doRefund.init(outTradeNo);
				})
			},
			doAlipay(){
				this.showAlipayVisible=true
				this.$nextTick(function(){
					this.$refs.showAlipay.init()
				})
			},
			getDataList(index,size){
				getAlipayRecordList(index,size).then(data=>{
					if(data.code=="0000"){
						this.tableData = data.data
					}else{
						this.$message.error(data.msg)
					}
				})
			},
		}
	}
</script>

<style>
</style>
